<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px" label-position="left">
      <el-row :gutter="20">
        <el-col :span="16">
          <el-form-item label="项目名称" prop="xmId">
            <el-select v-model="form.xmId" class="filter-item" placeholder="项目" style="width: 100%" disabled>
              <el-option v-for="item in xmList" :key="item.id" :label="item.xiangmumingcheng" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="公告类型">
            <el-select v-model="form.type" clearable style="width:100%;" disabled>
              <el-option v-for="item in fenleiList" :key="item.code" :label="item.name" :value="item.code" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="16">
          <el-form-item label="公告标题">
            <el-input v-model.trim="form.title" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="发布日期">
            <el-date-picker v-model="form.fabuTime" type="date" value-format="yyyy-MM-dd" style="width:100%;" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="16">
          <el-form-item label="来源URL">
            <el-input v-model.trim="form.source" disabled />
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="公告内容">
        <el-card class="box-card" style="height: 410px; overflow-y: scroll;">
          <span v-html="form.neiRong" />
        </el-card>
        <!-- <tinymce ref="tinymceRemark" v-model="form.neiRong" :height="250" disabled /> -->
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getInfo } from '@/api/baseNotice'
import { getXiangMuList } from '@/api/projectInfo'
import { getDictListByCode } from '@/api/dict'

// import Tinymce from '@/components/Tinymce'

export default {
  name: 'FuncFormsEdit',
  // components: { Tinymce },
  inject: ['getList'],
  props: {
    proid: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      form: {
        id: '',
        title: '',
        type: '',
        neiRong: '',
        fabuTime: ''
      },
      xmList: [],
      fenleiList: [],
      code: ''
    }
  },
  created() {
    this.getXiangMuList()
    this.getDictEntry('CDS_NOTICE_TYPE')
  },
  methods: {
    getDetailed() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      getInfo({ code: this.proid }).then(response => {
        this.form = response.data.notcie

        loading.close()
      }).catch(function() {
        loading.close()
      })
    },
    getXiangMuList() { // 加载列表
      this.xmList = []

      getXiangMuList().then(response => {
        this.xmList = response.data

        this.listLoading = false
      }).catch(response => {
        this.listLoading = false
      })
    },
    getDictEntry(code) {
      getDictListByCode(code).then(response => {
        if (code === 'CDS_NOTICE_TYPE') {
          this.fenleiList = response.data
        }
      })
    }
  }
}
</script>

<style lang="scss">
.collapse-title{
  font-size: 16px;
  color:#1196EE;
}
.el-input.is-disabled .el-input__inner {
    background-color: #F5F7FA !important;
    color: #000 !important;
    cursor: not-allowed;
}
.el-textarea.is-disabled .el-textarea__inner {
    background-color: #F5F7FA;
    border-color: #dfe4ed;
    color: #000000;
    cursor: not-allowed;
}
</style>

